<template>
  <el-card class="recently" shadow="hover">
    <template v-slot:header>
      <div class="clearfix">
        <span>最近阅读</span>
      </div>
    </template>
    <span class="nav">
      <el-empty v-if="latestList.length === 0"> </el-empty>
      <div v-else class="child" v-for="(item, index) in latestList">
        <span @click="details(item)">
          <span class="index">{{ index + 1 }}</span>
          <span class="title">{{ item.fileName }}</span>
        </span>
      </div>
    </span>
  </el-card>
  <el-card class="hot" shadow="hover">
    <template v-slot:header>
      <div class="clearfix">
        <span>大家都在看</span>
      </div>
    </template>
    <span class="nav">
      <el-empty v-if="popularList.length === 0"> </el-empty>
      <div v-else class="child" v-for="(item, index) in popularList">
        <span @click="details(item)">
          <span class="index" :class="index < 3 ? 'three' : ''">{{
            index + 1
          }}</span>
          <span class="title-num">
            <span class="fileName">{{ item.fileName }}</span>
            <span class="readNum">{{ item.readNum }}</span>
          </span>
        </span>
      </div>
    </span>
  </el-card>
</template>

<script setup name="rightList">
import { getLatest, getPopular } from '@/api/fileManager'
const router = useRouter()
const { proxy } = getCurrentInstance()

// 获取最近阅读
const latestList = ref([])
function _latestList() {
  getLatest()
    .then((res) => {
      latestList.value = res.data
    })
    .catch((err) => {})
}
_latestList()

// 获取大家都在看
const popularList = ref([])
function _getPopular() {
  getPopular().then((res) => {
    popularList.value = res.data
  })
}
_getPopular()

function details(obj) {
  if (obj.lock == 1) {
    proxy.$message.warning('您没有预览该文档权限，请联系管理员！')
    return
  }
  router.push({
    path: '/fileManager/fileview/' + (obj.fileId || obj.fileDetailId),
    query: {
      view: 1,
      mainId: obj.mainId,
      active: '/fileManager/documentConsult',
    },
  })
}
</script>

<style lang="scss" scoped>
.hot {
  margin-top: 10px;
}
.nav {
  max-height: 360px;
  display: block;
  overflow-y: auto;
  padding-right: 3px;
}
.child {
  width: 100%;
  .title {
    text-decoration: underline;
  }
  .three {
    color: #fe2d46;
  }
  .index {
    padding-right: 15px;
    font-weight: bold;
  }
  .readNum {
    /* float: right; */
  }
  .title-num {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    .fileName {
      word-break: break-word;
    }
  }
  > span {
    line-height: 30px;
    display: flex;
    justify-content: start;
    cursor: pointer;
  }
  > span:hover {
    color: #409eff;
  }
}
</style>
